<template>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
        <!-- 弹窗表单 -->
        <el-form :inline="false" :model="addForm" size="mini" class="demo-form-inline" label-width="120px" :rules="dataRule" ref="ruleForm">
            <!-- #1.基本信息 -->

            <el-form-item label="基础信息：" style="font-weight: bold"> </el-form-item>

            <el-form-item label="账号" prop="userId">
                <el-input v-model="addForm.userId" placeholder="请输入账号"  clearable></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="userPwd">
                <el-input v-model="addForm.userPwd" placeholder="请输入密码，字母+数字" show-password></el-input>
            </el-form-item>

            <el-form-item label="名称" prop="userName">
                <el-input v-model="addForm.userName" placeholder="请输入名称"  clearable></el-input>
            </el-form-item>

            <el-form-item label="联系人" prop="linkman">
                <el-input v-model="addForm.linkman" placeholder="请输入联系人"  clearable></el-input>
            </el-form-item>

            <el-form-item label="联系电话" prop="phone">
                <el-input
                    v-model="addForm.phone"
                    placeholder="请输入联系电话，数字"
                    clearable
                    oninput="value=value.replace(/[^\d]/g,'')"
                    maxlength="11"
                ></el-input>
            </el-form-item>

            <el-form-item label="签约手机" prop="signPhone">
                <el-input
                    v-model="addForm.signPhone"
                    placeholder="请输入签约手机，数字"
                    clearable
                    oninput="value=value.replace(/[^\d]/g,'')"
                    maxlength="11"
                ></el-input>
            </el-form-item>

            <el-form-item label="封面图" prop="surfacePlot">
                <upload :img.sync="addForm.surfacePlot" @update="update" />
            </el-form-item>

            <el-form-item label="地址" prop="addr">
                <el-input v-model="addForm.addr" placeholder="请输入地址"  clearable></el-input>
            </el-form-item>

            <el-form-item label="详细介绍" prop="detailDescribe">
                <el-input type="textarea" :rows="3" v-model="addForm['detailDescribe']" placeholder="请输入详细介绍" clearable />
            </el-form-item>

            <!-- #2.工商信息 -->
            <el-form-item label="工商信息：" style="font-weight: bold"> </el-form-item>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="企业名称" prop="fullName">
                        <el-input v-model="addForm.fullName" placeholder="请输入企业名称"  clearable> </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="营业执照号码" prop="certificateId">
                        <el-input v-model="addForm.certificateId" placeholder="请输入营业执照号码"  clearable> </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="注册地址" prop="certificateUrl">
                        <el-input v-model="addForm.certificateUrl" placeholder="请输入注册地址"  clearable> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- #3.保存和提交按钮 -->
            <el-form-item>
                <el-button @click="dialogVisible = false" style="padding: 10px 40px">取 消</el-button>
                <el-button type="primary" style="padding: 10px 40px" @click="addAndEditSubmit('ruleForm')">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import API from '@/api';
import upload from '../../../components/upLoad';
import cloneDeep from 'lodash/cloneDeep';

export default {
    components: {
        upload
    },

    data() {
        var validateUrl = (rule, value, callback) => {
            if (this.dataForm.type === 1 && !/\S/.test(value)) {
                callback(new Error('URL不能为空'));
            } else {
                callback();
            }
        };
        return {
            //el-dialog 弹窗
            dialogTitle: '新增',
            dialogVisible: false,
            type: 1,

            //表单
            addForm: {
                //基本信息
                userId: '',
                userPwd: '',
                userName: '',
                linkman: '',
                phone: '',
                signPhone: '',
                surfacePlot: '',
                addr: '',
                detailDescribe: '',

                //工商信息
                fullName: '',
                certificateId: '',
                certificateUrl: ''
            }
        };
    },

    methods: {
        //- 弹窗关闭
        handleClose() {
            this.clearForm();
            this.dialogVisible = false;
        },

        //- 清空新增中的数据
        clearForm() {
            this.addForm = {
                //基本信息
                userId: '',
                userPwd: '',
                userName: '',
                linkman: '',
                phone: '',
                signPhone: '',
                surfacePlot: '',
                addr: '',
                detailDescribe: '',

                //工商信息
                fullName: '',
                certificateId: '',
                certificateUrl: ''
            };
        },

        //- 初始化
        init(item, appId, pageId, appType) {
            this.dialogVisible = true;
            if (item) {
                this.type = 2; //编辑
                this.dialogTitle = '编辑';
                this.addForm = item;
            } else {
                this.type = 1; // 新增
                this.dialogTitle = '新增';
            }
        },

        //- 图片上传
        update(img) {
            this.addForm.surfacePlot = img;
        },

        //- 新增或编辑
        addAndEditSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = cloneDeep(this.addForm);

                    // 1. 新增    ,   2.编辑
                    var tick =
                        this.type == 1
                            ? API.iaFarmProductsPurchaseManger.purchaseInfoAdd(params)
                            : API.iaFarmProductsPurchaseManger.purchaseInfoListUpdate(params);

                    tick.then((data) => {
                        if (data.code == '0000') {
                            this.$message({
                                message: `${this.type == 2 ? '修改成功' : '新增成功'}`,
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    if (this.type == 2) {
                                        this.clearForm();
                                    }

                                    this.dialogVisible = false;
                                    this.$emit('refreshDataList');
                                }
                            });
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>

<style>
</style>